<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
 		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  		<link rel="stylesheet" type="text/css" href="./js/metroStyle/metroStyle.css">
  		<link rel="stylesheet" href="./js/zTreeStyle/zTreeStyle.css" type="text/css">
  		<style>
  			.layui-form-label{width: 90px;}
  			.layui-input-block{margin-left: 125px;}
  			.layui-upload-img{width: 92px;height: 92px;margin: 0 10px 10px 0;}
  		</style>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" lay-filter="component-form-group" style="padding: 10px 0 0 0;">
						<div class="layui-form-item">
								<div  class="layui-inline">
									<label class="layui-form-label">编号</label>
						            <div class="layui-input-block">
						              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入编号" class="layui-input">
						            </div>
								</div>
								<div  class="layui-inline">
									<label class="layui-form-label">菜单名称</label>
								    <div class="layui-input-block">
						              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
						            </div>
								</div>
								<div  class="layui-inline">
									<button class="layui-btn">查询</button>
								</div>
					    </div>
					</form>
					<hr>
					<div class="layui-btn-group demoTable" style="margin-bottom: 5px;">
					  <button class="layui-btn layui-btn-primary " data-type="add"><i class="layui-icon">&#xe654;</i>新增</button>
					</div>
					<div>
						<ul id="treeDemo" class="ztree"></ul>
					</div>
					<div id="addModal"  style="display: none;">
						<form class="layui-form" action="" lay-filter="component-form-group" style="margin: 10px;">
							<div  class="layui-form-item">
								<label class="layui-form-label">所属门户网站</label>
								<div class="layui-input-block">
									<select name="city" lay-verify="required">
									    <option value=""></option>
									    <option value="0">东升党建门户平台</option>
									    <option value="1">大平台综合数据公示平台</option>
									</select>
								</div>
							</div>
					      	<div class="layui-form-item">
					      		<label class="layui-form-label">所属页面</label>
					      		<div class="layui-input-block">
					      			<div id="sTree" class="select-tree layui-form-select">
            							</div>
					      		</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">显示栏目</label>
								<div class="layui-input-block">
									<input type="radio" name="class" value="新闻动态" title="新闻动态">
									<input type="radio" name="class" value="政务公开" title="政务公开">
									<input type="radio" name="class" value="政策法规" title="政策法规">
									<input type="radio" name="class" value="督查督办" title="督查督办">
									<input type="radio" name="class" value="月度排行" title="月度排行">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">栏目标题</label>
								<div class="layui-input-block">
									<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入自定义栏目名称" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">栏目位置号</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入位置号" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">栏目显示位置</label>
									<div class="layui-input-block">
										<select name="city" lay-verify="required">
											<option value=""></option>
											<option value="0">左</option>
											<option value="1">右</option>
										</select>
									</div>
								</div>
							</div>
					      	<div class="layui-form-item">
							    <div class="layui-input-block">
							      <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
							      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
							    </div>
							</div>
						</form>
					</div>
					<div>
						
					</div>
				</div>
			</div>
		</div>
		<script src="../../layuiadmin/layui/layui.js"></script> 
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/selectTree.js"></script>
		<script type="text/javascript" src="./js/jquery.ztree.all.js"></script>
		<script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="./js/jquery.ztree.exedit.js"></script>
		<script>
			layui.use(['form','table','upload', 'element'], function(){
				  var form = layui.form;
				  var table = layui.table;
				  var $ = layui.jquery;
				   //监听表格复选框选择
				  table.on('checkbox(demo)', function(obj){
				    console.log(obj)
				  });
				  //监听工具条
				  table.on('tool(demo)', function(obj){
				    var data = obj.data;
				    if(obj.event === 'detail'){
				      layer.msg('ID：'+ data.id + ' 的查看操作');
				    } else if(obj.event === 'del'){
				      layer.confirm('真的删除行么', function(index){
				        obj.del();
				        layer.close(index);
				      });
				    } else if(obj.event === 'edit'){
				      layer.alert('编辑行：<br>'+ JSON.stringify(data))
				    }
				  });
				  
				  var $ = layui.$, active = {
				    getCheckData: function(){ //获取选中数据
				      var checkStatus = table.checkStatus('idTest')
				      ,data = checkStatus.data;
				      layer.alert(JSON.stringify(data));
				    }
				    ,getCheckLength: function(){ //获取选中数目
				      var checkStatus = table.checkStatus('idTest')
				      ,data = checkStatus.data;
				      layer.msg('选中了：'+ data.length + ' 个');
				    }
				    ,isAll: function(){ //验证是否全选
				      var checkStatus = table.checkStatus('idTest');
				      layer.msg(checkStatus.isAll ? '全选': '未全选')
				    }
				  };
				  
				  $('.demoTable .layui-btn').on('click', function(){
				    var type = $(this).data('type');
				    active[type] ? active[type].call(this) : '';
				  });
				  
				  
				  $('[data-type="add"]').on('click', function(){
						layer.open({
						  type: 1,
						  area: ['600px', '450px'],
						  fixed: false, //不固定
						  maxmin: true,
						  content: $('#addModal')
						});
					});
					//下拉框
					var zNodes = [
						{ id:1, pId:0, name:"案件公示", open: true,nocheck:true},
						{ id:11, pId:1, name:"综治"},
						{ id:12, pId:1, name:"城管"},
						{ id:13, pId:1, name:"警务"},
						{ id:2, pId:0, name:"报表公示"},
						{ id:3, pId:0, name:"新闻动态"}
				    ];
				    var treeSet = {
						edit: {
							enable: true
						},
						data: {
							simpleData: {
								enable: true,
								editNameSelectAll: true
							}
						},
						callback: {
							beforeDrag: beforeDrag,
							beforeEditName: beforeEditName,
							beforeRemove: beforeRemove
						}
					};
					//页面
					var treeNodes =[
						{ id:1, pId:0, name:"东升党建门户平台", open:true},
						{ id:11, pId:1, name:"案件公示"},
						{ id:12, pId:1, name:"政务公开"},
						{ id:13, pId:1, name:"党章党规"},
						{ id:2, pId:0, name:"大平台综合数据公示平台", open:true},
						{ id:21, pId:2, name:"案件公示"},
						{ id:211, pId:21, name:"综治"},
						{ id:212, pId:21, name:"城管"},
						{ id:213, pId:21, name:"警务"},
						{ id:22, pId:2, name:"报表公示"},
						{ id:23, pId:2, name:"新闻动态"}
					];
					
					
					
				    $(document).ready(function () {
				        initSelectTree("sTree", false);
				        $.fn.zTree.init($("#treeDemo"), treeSet, treeNodes);
						//setEdit();
				    });
				    var log, className = "dark";
				    function beforeEditName(treeId, treeNode) {
					    	var tree=$.fn.zTree.getZTreeObj(treeId).expandNode(treeNode)
					    	console.log($.fn.zTree.getZTreeObj(treeId).expandNode(treeNode))
					    	if(tree===null){
					    		layer.open({
							  type: 1,
							  area: ['600px', '450px'],
							  fixed: false, //不固定
							  maxmin: true,
							  content: $('#addModal')
							});
					    	}else{
					    		layer.open({
							  type: 1,
							  area: ['600px', '450px'],
							  fixed: false, //不固定
							  maxmin: true,
							  content: $('#addModal')
							});
					    	}
				    		
					}
					function beforeRemove(treeId, treeNode) {
						className = (className === "dark" ? "":"dark");
						showLog("[beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
						var zTree = $.fn.zTree.getZTreeObj("treeDemo");
						zTree.selectNode(treeNode);
						return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
					}
					function showLog(str) {
						if (!log) log = $("#log");
						log.append("<li class='"+className+"'>"+str+"</li>");
						if(log.children("li").length > 8) {
							log.get(0).removeChild(log.children("li")[0]);
						}
					}
					function beforeDrag(treeId, treeNodes) {
						return false;
					}
					function setEdit() {
						var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					}
					
					
					//id div 的id，isMultiple 是否多选，chkboxType 多选框类型{"Y": "ps", "N": "s"} 详细请看ztree官网
					function initSelectTree(id, isMultiple, chkboxType) {
					    var setting = {
						    	check: {
								enable: true,
								chkStyle: "radio",
								radioType: "all"
							},
					        view: {
					            dblClickExpand: false,
					            //showLine: false
					        },
					        data: {
					            simpleData: {
					                enable: true
					            }
					        },
					        check: {
					            enable: false,
					            //chkboxType: {"Y": "ps", "N": "s"},
					            chkStyle: "radio",
								radioType: "all"
					        },
					        callback: {
					            onClick: onClick,
					            onCheck: onCheck
					        }
					
					    };
					    if (isMultiple) {
					        setting.check.enable = isMultiple;
					    }
					    if (chkboxType !== undefined && chkboxType != null) {
					        setting.check.chkboxType = chkboxType;
					    }
					    var html = '<div class = "layui-select-title" >' +
					        '<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
					        '<i class= "layui-edge"></i>' +
					        '</div>';
					    $("#" + id).append(html);
					    $("#" + id).parent().append('<div class="tree-content scrollbar" style="display: none;">' +
					        '<input hidden id="' + id + 'Hide" ' +
					        'name="' + $(".select-tree").attr("id") + '">' +
					        '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
					        '</div>');
					    $("#" + id).bind("click", function () {
					        if ($(this).parent().find(".tree-content").css("display") !== "none") {
					            hideMenu()
					        } else {
					            $(this).addClass("layui-form-selected");
					            var Offset = $(this).offset();
					            var width = $(this).width() - 2;
					            $(this).parent().find(".tree-content").css({
					                left: Offset.left + "px",
					                top: Offset.top + $(this).height() + "px"
					            }).slideDown("fast");
					            $(this).parent().find(".tree-content").css({
					                width: width
					            });
					            $("body").bind("mousedown", onBodyDown);
					        }
					    });
					    $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
					}
					
					function beforeClick(treeId, treeNode) {
					    var check = (treeNode && !treeNode.isParent);
					    if (!check) alert("只能选择城市...");
					    return check;
					}
					
					function onClick(event, treeId, treeNode) {
					    var zTree = $.fn.zTree.getZTreeObj(treeId);
					    if(zTree.expandNode(treeNode)===null){
					    		if (zTree.setting.check.enable == true) {
						        //zTree.checkNode(treeNode, !treeNode.checked, false)
						        zTree.checkNode(treeNode, !treeNode.checked, null, true);
						        assignment(treeId, zTree.getCheckedNodes());
						    } else {
						        assignment(treeId, zTree.getSelectedNodes());
						        hideMenu();
						    }
					    } 
					}
					
					function onCheck(event, treeId, treeNode) {
					    var zTree = $.fn.zTree.getZTreeObj(treeId);
					    assignment(treeId, zTree.getCheckedNodes());
					}
					
					function hideMenu() {
					    $(".select-tree").removeClass("layui-form-selected");
					    $(".tree-content").fadeOut("fast");
					    $("body").unbind("mousedown", onBodyDown);
					}
					
					function assignment(treeId, nodes) {
					    var names = "";
					    var ids = "";
					    for (var i = 0, l = nodes.length; i < l; i++) {
					        names += nodes[i].name + ",";
					        ids += nodes[i].id + ",";
					    }
					    if (names.length > 0) {
					        names = names.substring(0, names.length - 1);
					        ids = ids.substring(0, ids.length - 1);
					    }
					    treeId = treeId.substring(0, treeId.length - 4);
					    $("#" + treeId + "Show").attr("value", names);
					    $("#" + treeId + "Show").attr("title", names);
					    $("#" + treeId + "Hide").attr("value", ids);
					}
					
					function onBodyDown(event) {
					    if ($(event.target).parents(".tree-content").html() == null) {
					        hideMenu();
					    }
					}
			});
		
			
		</script>
	</body>
</html>
